<template>
    <div id="main"></div>
</template>

<script lang='ts' setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

import { useCommon } from '@/hooks/web/useCommon'
type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
const { throttle, createFigure, chartRef } = useCommon()
onMounted(() => {
    chartRef.value = 'main'
    window.addEventListener("resize", throttle(createFigure, 500));
    getChartsData()
})

const getChartsData = () => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom, 'light');
    var option: EChartsOption;

    option = {
        title: {
            text: '学生报名来源',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },

        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [

            {
                name: '人数',
                type: 'pie',
                radius: '50%',
                center: ['50%', '65%'],
                data: [
                    { value: 1048, name: '百度搜索' },
                    { value: 735, name: '微信公众号' },
                    { value: 580, name: '渠道' },
                    { value: 484, name: '学生推荐' },

                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}



</script>
<style scoped>
#main {
    width: 100%;
    height: 300px;
}
</style>